<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <c:set var="ctx" value="${pageContext.request.contextPath}"/>
    <script>
        var _ctx = "${ctx}";
        var ctx = _ctx;
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0"/>
    <link rel="stylesheet" href="${ctx}/vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/modules/app/css/login.css">
    <title>Title</title>
</head>
<body>
<div class="box">
    <div class="login-box">
        <div class="login-title text-center">
            <h1>
                <small>注册</small>
            </h1>
        </div>
        <div class="login-content ">
            <div class="form">
                <div class="form-group">
                    <div class="col-xs-12  ">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                            <input type="text" id="username" name="username" class="form-control" placeholder="用户名">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12  ">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                            <input type="password" id="password" name="password" class="form-control" placeholder="密码">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12  ">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                            <input type="password" id="repassword" name="repassword" class="form-control"
                                   placeholder="确认密码">
                        </div>
                    </div>
                </div>
                <div class="form-group form-actions">
                    <div class="col-xs-8">
                        <div class="input-group">
                            <a href="loginPage" style="padding-top: 10px;display: inline-block;">返回登录</a>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <button onclick="regist()" class="btn btn-sm btn-info"><span
                                class="glyphicon glyphicon-off"></span> 注册
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/vendor/jquery/jquery.min.js"></script>
<script>
    function regist() {
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        var repassword = $("input[name='repassword']").val();
        if (!username || username == '') {
            alert("请输入用户名");
        } else if (!password || password == '') {
            alert("请输入密码");
        } else if (!repassword || repassword == '') {
            alert("请输入确认密码");
        } else if (repassword != password) {
            alert("密码不相同");
        } else {
            $.ajax({
                url: ctx + "/regist",
                type: "post",
                data: {
                    username: username,
                    password: password
                },
                success: function (response) {
                    if (response.result == 'success') {
                        window.location.href = ctx + "/";
                    } else {
                        alert(response.result);
                    }
                }
            });
        }
    }
    function refreshCode() {
        $("#randomCode").attr("src", "img?" + new Date().getTime());
    }
    $(document).keypress(function (e) {
        switch (e.which) {
            case 13:
                regist();
                break;
        }
    });
</script>
</body>
</html>
